<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{background-color: lightblue;}
        p{
            color:blue;
            text-align: center;
        }
        .simple_selector{
            color: red;
        }
        .second_selector{
            color: gray;
        }
        #second_h1{
            color: green;
            font-style: italic;
        }
        div p {
            color:pink
        }
        div>p {
            color:blueviolet
        }
        .pseudo_class_selector:hover{
            color:red;
        }
        .pseudo_element_selector::first-line{
            color:green;
        }
        .pseudo_element_selector::first-letter{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class="simple_selector">简单选择器(class 为 simple_selector)</h1>
    <p class="simple_selector">简单选择器可以通过元素的名称、id、class 进行选择。(class 为 simple_selector)</p>
    <p class="simple_selector second_selector">选择class的时候用.classname来选择</p>
    <p>简单选择器的优先级：id选择器 > 类选择器 > 元素选择器</p>
    <h1 id="second_h1">id选择器</h1>
    <p id="second_h1">id选择器的写的方式#id名称</p>
    <h1>分组选择器</h1>
    <p>分组选择器可以用逗号隔开多个选择器，任何一个选择器匹配到元素，整个分组选择器就会选中这个元素。</p>
    <h1>通用选择器</h1>
    <p>通用选择器用*号表示，它可以匹配到页面中的所有元素。</p>
    <h1>组合 选择器</h1>
    <div>
        <p>后代选择器:匹配指定元素后代的元素，后代可以是子元素、孙元素等。</p>
    </div>
    <div>
        <p>子选择器:匹配指定元素的子元素，只能选择直接后代元素。div>p</p>
    </div>

    <h1>伪类选择器</h1>
    <p class="pseudo_class_selector">selector:鼠标行为{color:red}</p>
    <h1>伪元素选择器</h1>
    <p class="pseudo_element_selector">伪元素选择器用::开头，用来选择元素的特定部分，而不是选择元素本身。
        比如，::first-line 选择器可以用来选择元素的第一行。
        ::first-letter 选择器可以用来选择元素的第一个字母。
    </p>
    <p>
        伪元素选择器可以用来创建元素的特定部分，而不是选择元素本身。
        比如，::before 选择器可以用来在元素的开头插入内容。
        ::after 选择器可以用来在元素的结尾插入内容。
    </p>
    <h1>属性选择器</h1>
    <p>属性选择器可以根据元素的属性来选择元素。
        比如，[href] 选择器可以选择所有有 href 属性的元素。
        [href="https://www.baidu.com"] 选择器可以选择所有 href 属性值为 https://www.baidu.com 的元素
        。
        [attribute]
        [attribute="value"]
        [attribute~="value"]
        [attribute|="value"]
        [attribute^="value"]
        [attribute$="value"]
        [attribute*="value"]
    </p>
